<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../css/public.css">
  <link rel="stylesheet" href="../css/header.css">
  <link rel="stylesheet" href="../css/index.css">
  <link rel="stylesheet" href="../css/footer.css">
  <link rel="stylesheet" href="../font/iconfont.css">
  <script src="../js/jquery-1.10.1.min.js"></script>
  <script src="../lib/swiper/package/js/swiper.min.js"></script>

  <!-- <script src="../js/interfdce.js"></script> -->
</head>

<body>

  <header class="header"></header>

  <div class="content">
    <div class="banner">
      <nav>
        <div class="navOne">
          <ul>
            <li>
              <h4 class="newGoods">秋季新品</h4>
            </li>

            <li class="navBar">
              <h4 class="OneBtn">女士</h4>
              <div class="listOne">
                <span><a href="../html/goods.html">T恤/上衣</a></span>
                <span><a href="../html/goods.html">POLO衫</a></span>
                <span><a href="">卫衣</a></span>
                <span><a href="">外套</a></span>
                <span><a href="">裤装</a></span>
                <span><a href="">休闲衫</a></span>
                <span><a href="">运动鞋</a></span>
                <span><a href="">包包附配饰</a></span>
              </div>
            </li>

            <li class="navBar">
              <h4>男士</h4>
              <div class="listOne">
                <span><a href="">T恤/上衣</a></span>
                <span><a href="">POLO衫</a></span>
                <span><a href="">卫衣</a></span>
                <span><a href="">外套</a></span>
                <span><a href="">裤装</a></span>
                <span><a href="">休闲衫</a></span>
                <span><a href="">运动鞋</a></span>
                <span><a href="">包包附配饰</a></span>
              </div>
            </li>
            <li class="navBar">
              <h4>儿童</h4>
              <div class="listOne">
                <span><a href="">男童-服装</a></span>
                <span><a href="">男童-鞋类</a></span>
                <span><a href="">男童-包包附配品</a></span>
                <span><a href="">女童-服装</a></span>
                <span><a href="">女童-鞋类</a></span>
                <span><a href="">女童-包包附配品</a></span>
              </div>
            </li>
            <li>
              <h4><a href="../html/goods.html">FUSION</a></h4>
            </li>
          </ul>
        </div>
        <div class="navTwo">
          <ul>
            <li>
              <a href="">帮助中心</a>
            </li>
            <li>
              <a href="">+购物中心</a>
            </li>
            <li>
              <a href="">+关于FILA</a>
            </li>
            <li>
              <a href="">+工作机会</a>
            </li>
          </ul>
        </div>
      </nav>

      <div class="swiper-container mybanner" id="banner">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <img src="../images/49a317efb4d08eae849060e6ad6398b4.jpg" alt="" class="img">
          </div>
          <div class="swiper-slide">
            <img src="../images/0c73525ef75c7799aa1343586ef363a3.jpg" alt="" class="img">
          </div>
          <div class="swiper-slide">
            <img src="../images/59869f17de20a6dc746770cfeb9843ec.jpg" alt="" class="img">
          </div>
          <div class="swiper-slide">
            <img src="../images/8ac7904728c9bb067ac878bddaf4b4ae.jpg" alt="" class="img">
          </div>
          <div class="swiper-slide">
            <img src="../images/eaae8b03158f67bb1460551b6e97b36b.jpg" alt="" class="img">
          </div>
          <!-- <div class="swiper-slide">
            <img src="../images/49a317efb4d08eae849060e6ad6398b4.jpg" alt="" class="img">
          </div> -->
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-pagination"></div>
      </div>


    </div>
  </div>

  <!--底部  -->
  <footer class="footer"></footer>

</body>
<script>
  $(".header").load("header.html");
  $(".footer").load("footer.html");


  $(".newGoods").click(function () {
    console.log(111);
    $(location).attr("href", "goods.html");
  })


  // var clientwidth = $(".swiper-container").width();
  // var index = 0;
  // console.log(clientwidth);
  // // console.log($(".swiperBar"));
  // var timer = setInterval(function () {
  //   index++;
  //   $(".swiper-wrapper").animate({ left: -clientwidth * index }), function () {
  //     if (index >= 5) {
  //       $(".swiper-wrapper").css({ left: 0 })
  //       index = 0;
  //     }
  //   }

  // }, 1000)

  $(function () {
    let myswipe = new Swiper(".mybanner", {
      speed: 1800,
      autoplay: {
        delay: 3000,
        pauseOnMouseEnter: true,
      }, //自动播放   
      loop: true,          // 循环播放
      // mousewheel:true,
      navigation: {    // 前进后退按钮
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {   // 分页器
        el: '.swiper-pagination',
        clickable: true,
      }
    })

  })

  $(".navBar").click(function () {
    console.log(111);
    // $(".listOne").css("display", " block")
    $(this).find(".listOne").show().end().siblings().find(".listOne").hide();
  })

  $(".listOne span").click(function () {
    console.log(this);
    $(location).attr("href", "../html/goods.html")
  })

</script>

</html>